<template>
	<div class="my-house-contain">
		<p class="count-house">总共{{countHouse}}套</p>
		<el-divider></el-divider>
		<div class="my-house-box" v-for="house in houses">
			<HouseBox @delFlashData="delFlashData" ButtonType="下架房源" :house="house"></HouseBox>
		</div>
	</div>
</template>

<script>
	import {
		getMyHouse
	} from '@/api/house'
	import HouseBox from '@/views/house/components/house'
	export default {
		components: {
			HouseBox
		},
		data() {
			return {
				houses: []
			}
		},
		created() {
			this.getMyHouse()
		},
		methods: {
			async getMyHouse() {
				const res = await getMyHouse()
				this.houses = res.data
			},
			delFlashData(id) {
				this.houses.forEach((item, i) => {
					if (item.id == id) {
						this.houses.splice(item, 1)
					}
				})
			},
		},
		computed: {
			countHouse() {
				if (this.houses) {
					return this.houses.length
				}
			}
		}
	}
</script>

<style scoped>
	.my-house-box {
		position: relative;
	}

	.my-house-contain {
		text-align: left !important;
	}

	.count-house {
		margin: 0 20px;
	}
</style>
